<template>
    <div id="app">
        <transition name="fade">
            <router-view></router-view>
        </transition>
        <loading :show="loading" :text="text"></loading>
    </div>
</template>

<script>
import { Loading } from 'vux'
import { mapState } from 'vuex';

export default {
    name: "app",
    components: {
        Loading
    },
    computed: {
        ...mapState({
            loading: state => state.loading,
            text: state => state.text
        }),
    },
    data() {
        return {

        }
    },
    mounted() {
        
    }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
@import "./assets/css/style.less";

html {
    background-color: @main-body-color;
    body {
        max-width: @max-width;
        margin: 0 auto;
        touch-action: none; //防止[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.;
        font-family: PingFangSC-Regular;
        #app {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            .vux-loading .weui-toast {
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                margin: 0 auto;
            }
        }
    }
}
</style>
